<template>
    <div class="box">
        
        <h1>用户中心</h1>
        <a-dropdown class="box-one">
            <a class="ant-dropdown-link" @click.prevent>
                <a-avatar :size="40" v-show="!userInfo.avatarUrl">
                    <template #icon>
                        <UserOutlined />
                    </template>   
                </a-avatar>
                <a-avatar :size="40" v-show="userInfo.avatarUrl":src="userInfo.avatarUrl" />
                
                {{userInfo.userAccount }}
                <DownOutlined />
            </a>
            <template #overlay>
                <a-menu>
                    <a-menu-item>
                        <a @click="userLogout">退出登录</a>
                    </a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>

       
    </div>

</template>
<script lang="ts" setup>
import { useRouter } from "vue-router"
const router = useRouter()
import { DownOutlined,UserOutlined } from '@ant-design/icons-vue';
import {userLogoutApi} from '../../api/user'
const userLogout = async () => {
    await userLogoutApi();

    router.replace({
        path:'/'
    })
}
defineProps(['userInfo'])



</script>

<style lang="scss" scoped>
.box {

    
    width: 100%;
    height: 100%;
    h1{
        display: inline-block;
        margin-left: 30px;
        font-size: 23px;
        font-weight: bolder;
    }

    .box-one { 
        float: right;
        display: inline-block;
       
        margin-right: 40px;
    }

}
</style>